<template>
  <div class="workshop-map">
    <div>
      <label>{{ $t("route.DeviceManager") }}</label>
      <div></div>
      <button>
        <img /><label>{{ $t("route.Workshop_equipment") }}</label>
      </button>
      <div class="div-handle-right">
        <el-button @click="refreshClick">{{ $t("route.Refresh") }}</el-button>
        <label>{{ refreshTime }}</label>
      </div>
    </div>

    <div>
      <el-select
        style="margin-left: 10px"
        v-model="workshop"
        :placeholder="$t('route.Please_select_workshop')"
        @change="workshopChange"
      >
        <el-option
          v-for="item in workshopList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <el-tag style="margin-left: 20px; background-color: #ffff00" size="medium">{{
        $t("route.Standby_device")
      }}</el-tag>
      <el-tag style="margin-left: 20px; background-color: #00ff00" size="medium">{{
        $t("route.sewing_equipment")
      }}</el-tag>
      <el-tag style="margin-left: 20px; background-color: #ff0000" size="medium">{{
        $t("route.Abnormal_device")
      }}</el-tag>

      <div class="div-handle-right">
        <el-button>{{ $t("route.Delete") }}</el-button>
        <el-button @click="searchClick">{{ $t("route.search") }}</el-button>
        <input
          v-model="search"
          :placeholder="$t('route.Head_Model') + '/' + $t('route.Serial')"
        />
      </div>
    </div>

    <div class="div-pro-line" v-for="item in dataList">
      <label>{{ item.proLine }}</label>
      <div>
        <label
          :style="{
            'border-color': device.online ? '#009900' : '#CCCCCC',
            'background-color': formatBgColor(device),
          }"
          v-for="device in item.deviceList"
          >{{ device.noseCode }}</label
        >
      </div>
    </div>
  </div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import Constant from "../../js/common/constant.js";
export default {
  data() {
    return {
      workshopList: [],
      workshop: null,
      search: null,
      dataList: [],
      refreshTime: null,
    };
  },
  methods: {
    refreshClick() {
      this.getDevicePro2();
    },

    formatBgColor(device) {
      if (device.state == 0) {
        return device.isSew ? "#00FF00" : "#FFFF00";
      } else {
        return "#FF0000";
      }
    },

    getAllWorkshop() {
      http.post(
        api.GET_ALL_WORKSHOP,
        {
          adminId: this.$store.state.user.id,
          factory: Constant.FACTORY == "全部工厂" ? null : Constant.FACTORY,
        },
        (data) => {
          this.workshopList = data.data;
          if (this.workshopList.length > 0) {
            this.workshop = this.workshopList[0].name;
            this.getDevicePro2();
          }
        }
      );
    },
    getDevicePro2() {
      http.post(
        api.GET_DEVICE_PRO2,
        {
          adminId: this.$store.state.user.id,
          workshop: this.workshop,
          search: this.search,
        },
        (data) => {
          var dataList = [];
          for (var item of data.data) {
            var dataJson = this.getData(dataList, item.proLine);
            if (dataJson == null) {
              dataJson = {
                proLine: item.proLine,
                deviceList: [],
              };
              dataList.push(dataJson);
            }
            dataJson.deviceList.push(item);
          }
          console.log(JSON.stringify(dataList));
          this.dataList = dataList;
          this.refreshTime = new Date().format("yyyy-MM-dd hh:mm:ss");
        }
      );
    },
    getData(dataList, proLine) {
      for (var dataJson of dataList) {
        if (dataJson.proLine == proLine) {
          return dataJson;
        }
      }
      return null;
    },

    workshopChange() {
      this.getDevicePro2();
    },

    searchClick() {
      this.getDevicePro2();
    },
  },
  created() {
    this.getAllWorkshop();
  },
};
</script>
<style lang="scss" scoped>
.workshop-map {
  color: #444444;
  font-size: 18px;
  padding-right: 20px;
  height: calc(100vh - 100px);
  // overflow: scroll;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
  }

  > div:nth-of-type(1) {
    display: flex;
    flex-direction: row;

    > label:nth-of-type(1) {
      font-weight: 600;
    }

    > div:nth-of-type(1) {
      width: 1px;
      background-color: #cccccc;
      height: 15px;
      margin: 0px 20px;
    }

    > button:nth-of-type(1) {
      background-image: url(../../assets/img/customer-1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5px 10px;
      border: 0px;
      display: flex;
      color: #ffffff;
      flex-direction: row;
      align-items: center;
      font-weight: 800;

      > img {
        margin-right: 7px;
        width: 15px;
        height: 15px;
        content: url(../../assets/img/customer-2.png);
      }
    }
  }

  > div:nth-of-type(2) {
  }

  .div-pro-line {
    > label {
      border: 1px solid #cccccc;
      padding: 5px 10px;
      width: 20px;
    }

    > div:nth-of-type(1) {
      > label {
        float: left;
        color: #000000;
        background-color: #00ff00;
        margin: 5px 5px;
        padding: 20px 20px;
        border-width: 4px;
        border-style: solid;
        border-color: #99ccff;
      }
    }
  }

  .div-handle-right {
    flex: 1;
    flex-direction: row-reverse;
    text-align: right;
    display: flex;
    align-items: center;

    > input:nth-of-type(1) {
      border: 1px solid #eeeeee;
      font-size: 15px;
      width: 150px;
      padding: 5px 8px;
      outline: none;
    }

    > button {
      color: #a866ff;
      margin-left: 10px;
      padding: 4px 20px;
    }
  }
}
</style>
